<template>
    <div class="login_container">
        <div class="login_box">
            <div class="avater_box">
                <img src="../assets/login.png" alt="">
            </div>
            <el-form ref="loginFormRef" class="login_form" :model="loginForm" :rules="loginFormRule">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
				//登录表单数据绑定
				loginForm: {
					username: '',
					password: ''
				},
				loginFormRule: {
					username: [
						{required: true, message: '请输入手机号', trigger: 'blur'},
						{min: 11, max: 11, message: '长度在11个字符', trigger: 'blur'}
					],
					password: [
						{required: true, message: '请输入密码', trigger: 'blur'},
						{min: 6, max: 11, message: '长度在 6到11 个字符', trigger: 'blur'}
					]
				}
			}
		},
		methods: {
			resetLoginForm() {
				this.$refs.loginFormRef.resetFields();
			},
			login() {
				this.$refs.loginFormRef.validate(async valid => {
					console.log(valid)
					if (!valid) return false
					// 制作参数
					let params = new URLSearchParams()
					params.append('username', this.loginForm.username)
					params.append('password', this.loginForm.password)

					// this.$http.post('login', this.loginForm): 返回值为promise
					// 返回值为promise，可加await简化操作 相应的也要加async
					const {data: resp} = await this.$http.post('/sysUsers/login', params)
                    // const {data: res} = await this.$http.get('/sysUsers/getPermissions')
                    // console.log(res)
					// console.log(resp)
					if (resp.code !== 200) return this.$message.error('用户名和密码错误')
                    window.sessionStorage.setItem('token', resp.data)
                    this.$message.success('登录成功')
                    this.$router.push('/')
                    // if (res.code !== 200) return this.$message.error('用户权限不足')
                    // console.log(res.data.perms)
					// 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; localStorage中是持久化的保存
					//   1.1 项目中出现了登录之外的其他API接口，必须在登陆之后才能访问
					//   1.2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
                    // window.sessionStorage.setItem('sysUserRole',JSON.stringify(res.data.perms))
                    // console.log(res.data.perms)
					// 2、通过编程式导航跳转到后台主页, 路由地址为：/home

				});
			}
		}

	}
</script>

<style lang="less" scoped>
    .login_container {
        background-color: #2b4b6b;
        height: 100%;
    }

    .login_box {
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

    }

    .avater_box {
        height: 130px;
        width: 130px;
        border-radius: 50%;
        border: 1px solid #eee;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #eeeeee;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

    }

    .btns {
        display: flex;
        justify-content: flex-end;
    }

    .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;

    }

</style>
